<template>
    <div class="container">
        <h3>个人中心</h3>
        <div>
            <div style="width:70%;display:inline-block;">
                <div class="personagecontent">
                    <!-- <span class="pc-name">姓名：</span> -->
                    <div style="font-size:16px;font-weight:600;margin-top:10px;">{{date.name}}</div>
                    <div style='margin-top:20px;'>
                        <span style="margin-top:10px;color:#ABABAB;display:inline-blcok;">部门：{{date.department}}</span>
                        <span style="margin-left:50px;color:#ABABAB;display:inline-blcok;">身份证号码：{{date.idCard}}</span>
                        <span style="margin-left:50px;color:#ABABAB;display:inline-blcok;">学历：{{date.education}}</span>
                        <span style="margin-left:50px;color:#ABABAB;display:inline-blcok;">入职时间：{{date.jobtime}}</span>
                    </div>

                    <el-button @click="msgVisible = true" type="text" style="position:absolute;right:0; top:40px;">修改</el-button>

                    <!-- 弹出其他信息修改 -->
                    <el-dialog title="基础信息修改" :visible.sync="msgVisible" width="350px">
                        <el-form ref="form" :model="formMsg" class="demo" label-width="100px" :inline="true">
                            <el-form-item label="姓名" class="center">
                                <el-input style="width:200px" placeholder="请输入姓名" v-model="formMsg.username"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证号码" class="center">
                                <el-input  style="width:200px" placeholder="请输入身份证号码" v-model="formMsg.idCard"></el-input>
                            </el-form-item>
                            <el-form-item label="学历" class="center">
                                <el-select style="width:200px"  v-model="formMsg.education" placeholder="请选择"  clearable>
                                    <el-option   :value="item" v-for="(item, index) in educations" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="cancelMsg">取 消</el-button>
                            <el-button type="primary" @click="agreeMsg">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <div class="personagecontent">
                    <div>
                        <span class="pc-name">手机号码：</span>
                        <span class="pc-con">{{date.phone}}</span>
                    </div>
                    <div style="color:#ABABAB;font-size:12px;margin-top:5px;">当前登录手机号</div>
                    <el-button @click="phoneVisible = true" type="text" class="pc-button">修改</el-button>
                </div>

                <!-- 弹出手机修改 -->
                <el-dialog title="手机号码修改" :visible.sync="phoneVisible" width="350px">
                    <el-form ref="form" :model="formPhone" class="demo" label-width="80px" :inline="true">
                        <el-form-item label="手机号码" class="center">
                            <el-input placeholder="请输入手机号码" v-model="formPhone.phone"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="cancelPhone">取 消</el-button>
                        <el-button type="primary" @click="agreePhone">确 定</el-button>
                    </span>
                </el-dialog>


                <div class="personagecontent">
                    <span class="pc-name">密码：</span>
                    <span class="pc-con">******</span>
                    <el-button @click="pwdVisible = true" type="text" class="pc-button">修改</el-button>
                </div>


                <!-- 弹出密码修改 -->
                <el-dialog title="手机号码修改" :visible.sync="pwdVisible" width="350px">
                <el-form ref="form" :model="formPwd" class="demo" label-width="80px" :inline="true">
                    <el-form-item label="当前密码" class="center">
                        <el-input placeholder="请输入旧密码" v-model="formPwd.oldPwd"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" class="center">
                        <el-input placeholder="请输入新密码" v-model="formPwd.newPwd"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" class="center">
                        <el-input placeholder="再次确认新密码" v-model="formPwd.cnewPwd"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelPwd">取 消</el-button>
                    <el-button type="primary" @click="agreePwd">确 定</el-button>
                </span>
                </el-dialog>
            </div>
            <div style="width:30%;display:inline-block;">
                <div style="text-align:center;" v-if="ifshow">
                    <div class="headImg-content" style="margin-bottom:10px;">
                        <img :src="headImg" class="headImg" alt="">
                    </div>
                    <el-button @click="dialogFormVisible3 = true" type="primary">更换头像<i class="el-icon-upload el-icon--right"></i></el-button>
                </div>
                <div style="text-align:center;" v-else>
                    <div class="headImg-content" style="margin-bottom:10px; line-height:80px; font-size:24px; cursor:pointer;color:white;">
                        {{usernameImg}}
                    </div>
                    <el-button @click="dialogFormVisible3 = true" type="primary">更换头像<i class="el-icon-upload el-icon--right"></i></el-button>
                </div>


                <el-dialog title="修改头像" style="width:800px;margin:0 auto;" :visible.sync="dialogFormVisible3">
                    <el-form :model="formHead">
                        <el-form-item label="头像：">
                            <el-upload
                                class="upload-poster"                               
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                    :on-change="imgPreview"
                                    :auto-upload="false">
                                    <img width="100%" v-if="headImg" :src="headImg" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            jpg、png、gif格式，60x60像素，不超过2MB
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="abolish_editheadimg">取 消</el-button>
                        <el-button type="primary" @click="submit_editheadimg('ruleForm2')">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import {staffuser_findById, staffuser_update, staffuser_checkPwd} from "@/request/api";
    export default {
        // inject:['reload'],
        data(){
            return {
                form1:{},
                dialogFormVisible1:false,
                ifshow: false,
                date: {},
                usernameImg: '',
                educations:[
                    "文盲",
                    "小学",
                    "初中",
                    "高中",
                    "大专",
                    "本科",
                    "硕士",
                    "博士"
                ],
                msgVisible:false,
                formMsg:{
                    username:"",
                    idCard:"",
                    education:""
                },
                phoneVisible:false,
                formPhone:{
                    phone:''
                },
                pwdVisible:false,
                formPwd:{
                    oldPwd:'',
                    newPwd:'',
                    cnewPwd:''
                },
                dialogFormVisible3:false,
                formHead:{},
                headImg:'',
                data:{}
            }
        },
        mounted(){
            this.init();
            let username = localStorage.getItem('ms_username');
            this.usernameImg = username.substring(0, 1)
        },
        methods: {
            init(){
                var id = JSON.parse(localStorage.getItem("userid"))

                staffuser_findById(id).then((res) => {
                    this.date = res.data;
                    this.data = res.data;
                    if(this.data.headImg == "" || this.data.headImg == null || this.data.headImg == "null"){
                        this.ifshow = false
                    }else{
                        this.ifshow = true
                        localStorage.setItem('headImg',this.data.headImg)
                        this.headImg = this.$store.state.plantImg + this.data.headImg
                    }
                })
            },
            cancelMsg(){
                this.msgVisible = false
                this.formMsg = {
                    username:"",
                    idCard:"",
                    education:""
                }
            },
            agreeMsg(){
                let {username,idCard,education} = this.formMsg
                let data = JSON.parse(JSON.stringify(this.date))
                
                data.name = username
                data.idCard = idCard
                data.education = education
                data.jobtime = new Date(this.date.jobtime)
                let formdata = new FormData()
                for(var a in data){
                    if(data[a] == null || data[a] == "null"){
                        data[a] = ""
                        formdata.append(a,'') 
                    }else{
                        formdata.append(a,data[a])
                    }
                }
                staffuser_update(formdata).then(res=>{
                    this.msgVisible = false
                    this.formMsg = {
                        username:"",
                        idCard:"",
                        education:""
                    }
                    this.$message.success('基础信息修改成功')
                    this.init()
                    
                })
                
            },
            cancelPhone(){
                this.phoneVisible = false
                this.formPhone.phone = ''
            },
            agreePhone(){
                if(!this.formPhone.phone){
                    this.$message.error("电话不能为空")
                    return
                }
                let data = JSON.parse(JSON.stringify(this.date))
                data.phone = this.formPhone.phone
                data.jobtime = new Date(this.date.jobtime)
                let formdata = new FormData()
                for(var a in data){
                    if(data[a] == null || data[a] == "null"){
                        data[a] = ""
                        formdata.append(a,'') 
                    }else{
                        formdata.append(a,data[a])
                    }
                }
                staffuser_update(formdata).then(res=>{
                    this.phoneVisible = false
                    this.formPhone.phone = ''
                    this.$message.success('电话号码修改成功')
                    this.init()
                })
            },
            cancelPwd(){
                this.pwdVisible = false
                this.formPwd = {
                    oldPwd:'',
                    newPwd:'',
                    cnewPwd:''
                }
            },
            agreePwd(){
                if(!this.formPwd.oldPwd){
                    this.$message.error('旧密码不能为空')
                    return
                }
                if(!this.formPwd.newPwd){
                    this.$message.error('新密码不能为空')
                    return
                }
                if(this.formPwd.newPwd !== this.formPwd.cnewPwd){
                    this.$message.error('两次密码不一致')
                    return
                }
               
                let data = JSON.parse(JSON.stringify(this.date))
                data.password = this.formPwd.newPwd
                data.jobtime = new Date(this.date.jobtime)
                // 检查密码
                let obj = {
                    userId:data.id,
                    password:this.formPwd.oldPwd
                }
                staffuser_checkPwd(obj).then(res=>{
                    // 密码正确,再发送请求修改密码
                    if(res.data){
                        let formdata = new FormData()
                        for(var a in data){
                            if(data[a] == null || data[a] == "null"){
                                data[a] = ""
                                formdata.append(a,'') 
                            }else{
                                formdata.append(a,data[a])
                            }
                        }
                        staffuser_update(formdata).then(res=>{
                            this.pwdVisible = false
                            this.formPwd = {
                                oldPwd:'',
                                newPwd:'',
                                cnewPwd:''
                            }
                            this.$message.success('密码修改成功')
                            this.init()
                        })
                    }else{
                        this.$message.error('旧密码输入错误')
                    }
                })

                
            },
            // 检测文件是否图片
            imgPreview(file,fileList) {
                this.headImg =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png|.jpeg)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.data.files = file.raw
                    this.data.headImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
            },
            abolish_editheadimg(){
                this.dialogFormVisible3 = false
                this.init()
            },
            submit_editheadimg(formName){
                // console.log(this.data.oldHeadImg)
                let formdata = new FormData()
                this.data.jobtime = new Date(this.data.jobtime)
                for(var a in this.data){
                    formdata.append(a,this.data[a])
                }
                // if(this.data.oldHeadImg == ""){

                // }else{
                    staffuser_update(formdata).then((res)=>{
                        this.$notify({
                            title: '提示',
                            message: '修改成功',
                            type: 'success'
                        });
                        this.dialogFormVisible3 = false
                        this.init()
                        // this.reload()
                    })   
                // }
                 
            },
        }
    }
</script>

<style scoped>
    .headImg-content {
        text-align: center;
        /* margin-top:20px; */
        border-radius: 50%;
        background: #409EFF;
        width: 80px;
        height: 80px;
        /* display: inline-block; */
        margin: auto;
    }

    .headImg {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        /* margin: auto; */
    }

    .pc-button {
        position: absolute;
        right: 0;
        top: 13px;
    }

    .pc-con {
        /* position: absolute; */
        /* left:90px; */
    }

    .personagecontent {
        padding: 20px;
        /* height:50px;
        line-height:50px; */
        font-size: 14px;
        border-bottom: 1px solid #DCDFE6;
        /* margin-top:20px; */
        position: relative;
    }

    .center{
        display: flex;
        justify-content: center;
        align-content: center;
    }
    
</style>